<template>
  <Panel tite="账号列表">
    <el-table :data="list" @selection-change="selectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="userGroup" label="用户组"></el-table-column>
      <el-table-column prop="ctime" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.ctime | formaDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 按钮： 插槽内容得到子组件的这一行的数据 -->
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="removeAcc(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-pagination
      layout="prev, pager, next"
      :page-size="pageinfo.pageSize"
      :current-page="pageinfo.currentPage"
      @current-change= "pageChange"
      :total="total"
    >
    </el-pagination> -->

    <el-pagination
      @size-change="changeSize"
      @current-change="pageChange"
      :current-page="pageinfo.currentPage"
      :page-sizes="[5, 8, 14, 20]"
      :page-size="pageinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <span>
      <el-button style="margintop: 20px" type="danger" @click="batchDel"
        >批量删除</el-button
      >
      <el-button type="primary">取消选择</el-button>
    </span>

    <!-- 编辑弹窗 -->
    <el-dialog title="账号修改" width="50%" :visible="dialogFormVisible">
  
      <AccountForm
        type="edit"
        @success="success"
        :defaultForm="curGoods"
      ></AccountForm>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible = false">取 消</el-button
        >
      </div>
    </el-dialog>
  </Panel>
</template>
 

<script>
import {
  usersListReq,
  usersDelReq,
  usersBatchde,
  usersEditReq,
} from "@/api/account.api.js";

import dayjs, { isDayjs } from "dayjs";

import AccountForm from "./components/AccountForm.vue";
export default {
  components: {
    AccountForm,
  },
  data() {
    return {
      // 控制弹框的显影
      dialogFormVisible: false,
      cateList: [],
      pageinfo: {
        currentPage: 1,
        pageSize: 5,
      },
      // 账号列表
      list: [],
      total: 0,
      ids: "",

      form: {
        account: "",
        userGroup: "",
      },
      curGoods: {},
    };
  },

  // 时间转换
  filters: {
    formaDate(date) {
      return dayjs(date).format("YYYY/MM/DD");
    },
  },
  methods: {
    // 编辑里面修改账号
    success(form) {
      usersEditReq(form).then((res) => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.getData();
        }
      });
    },

    // 编辑事件
    handleEdit(row) {
      // 弹出弹框
      this.dialogFormVisible = true;

      // 数据绑定
      // this.form.account = row.account;
      // this.form.userGroup = row.userGroup;
      // this.form.id = row.id;
      this.curGoods = { ...row };
    },
    pageChange(currentPage) {
      // 改变页码
      this.pageinfo.currentPage = currentPage;
      // 重新调用getData
      this.getData();
    },

    //每页条数发生改变
    changeSize(size) {
      console.log(size);
      // console.log(this.pageinfo.pageSize);
      this.pageinfo.pageSize = size;
      // console.log(this.pageinfo.pageSize );
      this.getData();
    },

    // 获取数据渲染页面
    getData() {
      usersListReq(this.pageinfo.currentPage, this.pageinfo.pageSize).then(
        (res) => {
          this.list = res.data.data;
          this.total = res.data.total;
          console.log(this.list);
        }
      );
    },

    // 删除事件
    removeAcc({ row }) {
      // 提示用户是否删除
      this.$confirm("确定要删除这个员工信息吗?", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "不删除",
        type: "warning",
      })
        .then(() => {
          // console.log("点击了删除~~~~~");
          usersDelReq(row.id).then((res) => {
            this.$message.success("删除成功");
            this.getData();
          });
        })
        .catch(() => {
          console.log("点击了不删除");
        });
    },

    // 拿到id
    selectionChange(selection) {
      this.ids = JSON.stringify(selection.map((item) => item.id));
      console.log(this.ids);
    },

    // 批量删除
    batchDel() {
      usersBatchde(this.ids).then((res) => {
        if (res.data.code === 0) {
          // 删除成功之后重新请求数据
          this.$message.success("删除成功");
          this.getData();
        }
      });
    },
  },

  created() {
    // 进入页面 立即调用获取数据的函数
    this.getData();
  },
};
</script>

<style lang="less" scoped>
</style>